<!-- 标题-风格 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="组件风格" name="1">
            <el-row>
                <el-col :span="8">
                    <div :class="['mode-item-box', { 'active': mode === 0 }]" @click="mode = 0">
                        <div class="mode-item-centent">
                            <div class="mark"></div>
                            <div class="mode-item-txt"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div :class="['mode-item-box', { 'active': mode === 1 }]" @click="mode = 1">
                        <div class="mode-item-centent">
                            <div class="mark mode-item-mark1"></div>
                            <div class="mode-item-txt"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div :class="['mode-item-box', { 'active': mode === 2 }]" @click="mode = 2">
                        <div class="mode-item-centent">
                            <div class="mark mode-item-mark2"></div>
                            <div class="mode-item-txt"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div :class="['mode-item-box', { 'active': mode === 3 }]" @click="mode = 3">
                        <div class="mode-item-centent">
                            <div class="mark mode-item-mark3"></div>
                            <div class="mode-item-txt"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <template v-if="mode !== 0">
                <el-divider></el-divider>
                <layout-pane label="间距">
                    <si-input-number
                        v-model="markMargin"
                        :min="0"
                        unit="px"
                    />
                </layout-pane>

                <el-divider></el-divider>
                <layout-pane label="颜色">
                    <si-color-picker
                        v-model="widget.widgetData.eles.customFeature.markColor"
                        label="标记"
                        show-alpha
                    />
                </layout-pane>
            </template>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'TitleEleMode',
    components: {
        LayoutPane,
        SiInputNumber,
        SiColorPicker
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const mode = computed({
            get: () => widget.value.widgetData.eles.customFeature.mode,
            set: val => widget.value.widgetData.eles.customFeature.mode = val
        })

        const markMargin = computed({
            get: () => {
                const customFeature = widget.value.widgetData.eles.customFeature
                if ([1, 3] .includes(mode.value)) {
                    return customFeature['markMargin-right']
                }
                return customFeature['markMargin-top']
            },
            set: val => {
                const customFeature = widget.value.widgetData.eles.customFeature
                customFeature.markMargin = val
                if ([1, 3] .includes(mode.value)) {
                    customFeature['markMargin-right'] = val
                } else {
                    customFeature['markMargin-top'] = val
                }
            }
        })

        return {
            widget,
            mode,
            markMargin
        }
    }
})
</script>

<style lang="less" scoped>
.mode-item-box {
    display: block;
    width: 84px;
    height: 30px;
    border: 1px solid var(--edit-border-color-darker);
    padding: 5px;
    margin: 5px auto;
    vertical-align: top;
    box-sizing: border-box;
    cursor: pointer;
    &.active {
        border-color: var(--edit-color-primary);
    }
    .mode-item-centent {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: initial;
        line-height: initial;
        background-color: var(--edit-border-color);
        .mark {
            position: absolute;
            display: inline-block;
            &.mode-item-mark1 {
                width: 4px;
                height: 10px;
                margin-top: 4px;
                background-color: var(--edit-text-color-disabled);
            }
            &.mode-item-mark2 {
                width: 26px;
                height: 2px;
                background-color: var(--edit-text-color-disabled);
                bottom: 0;
                left: 8px;
            }
            &.mode-item-mark3 {
                width: 6px;
                height: 6px;
                background-color: var(--edit-text-color-disabled);
                border-radius: 50%;
                margin-top: 6px;
            }
        }
        .mode-item-txt {
            display: inline-block;
            width: 25px;
            height: 10px;
            background-color: var(--edit-text-color-disabled);
            margin-left: 8px;
            vertical-align: top;
            margin-top: 4px;
        }
    }
}
</style>